<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            border: black 1px solid;
        }
        #div2{
            width: 300px;
            height: 300px;
            border: black 2px solid;
        }
        h1{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="div1" class="div1">div1</div>
    <div id="div2" class="div1">div2</div>
    <h1>水中天sb</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <input type="checkbox" name="sztsb" value="水">
    <input type="checkbox" name="sztsb" value="中">
    <input type="checkbox" name="sztsb" value="天">

    <script>
        //根据id获取元素
        console.log("----------------根据id获取元素-----------------");
        var div1=document.getElementById('div1');
        var div2=document.getElementById('div2');
        console.log(div1);
        console.log(div2);

        //根据标签名获取元素
        console.log("----------------根据标签名获取元素-----------------");
        var li=document.getElementsByTagName('li');
        for(var i=0;i<li.length;i++){
            console.log(li[i]);
        }

        //根据name获取元素
        console.log("----------------根据name获取元素-----------------");
        var szt=document.getElementsByName('sztsb');
        console.log(szt);

        //根据类名获取元素
        console.log("----------------根据类名获取元素-----------------");
        var cls=document.getElementsByClassName('div1');
        for(var j=0;j<cls.length;j++){
            console.log(cls[j]);
        }

        //根据css获取元素
        console.log("----------------根据css获取元素-----------------");
        //1
        console.log('---1---');
        var css=document.querySelectorAll('.div1');
        for(var k=0;k<css.length;k++){
            console.log(css[k]);
        }
        //2
        console.log('---2---');
        var css2=document.querySelector('#div2');
        console.log(css2);
    </script>
</body>
</html>